<template>
	<view class="">
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 800rpx;">
				<swiper-item v-for="(item, index) in bannerList" :key="index" >
					<view class="swiper-item" >
						<image :src="$store.state.host+item" alt="" style="width: 100%;height: 800rpx;" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="dis-flex flex-wrap mt20">
				<view class="br10 product-box-shadow bg-fff mb10 dis-flex-column ml10" style="width: 345rpx;"
					v-for="(item, index) in pageList" :key="index" @tap="pushProductDetail(item.id)">
					<view class="dis-flex flex-center p10">
						<u-image :src="$store.state.host+item.thumb" height="305" width="305"></u-image>
					</view>
					<view class="fs14 fwb mt5 c-2a2 px10 ellipsis-1">{{item.name}}</view>
					<view class="p10 dis-flex flex-align-center">
						<text class="fs15 c-red fwb">{{item.scoreprice}}积分</text>
						<!-- <text class="fs12 c-a8a ml5 text-decoration">￥{{$api.toFix(item.costPrice)}}</text> -->
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				pageList: [],
				bannerList:[]
			}
		},

		onLoad(option) {
			this.getBanner()
		},

		methods: {

			downCallback() { 
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			
			
			getBanner(){
				this.$http.post(this.$config.UrlBannerLoad, {
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					this.bannerList = res.data
				}).catch((err) => {
					this.mescroll.endErr();
				})
			},

			upCallback(page) {
				this.$http.post(this.$config.UrlProductList, {
					page: page.num,
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					let datalist = res?.data?.data || []
					if (page.num == 1) this.pageList = [];
					this.pageList.push.apply(this.pageList, datalist);
					this.mescroll.endBySize(datalist.length, res?.data?.total);
				}).catch((err) => {
					this.mescroll.endErr();
				})
			},
			
			// 跳转详细
			pushProductDetail(id) {
				this.$api.openWindow(`/pages/product/productDetailed?id=${id}`);
			}
		}
	}
</script>

<style>
	
	page{
		background: #fff;
	}
	
	.top-search-view {
		position: fixed;
		left: 0;
		background-color: #fff;
		height: 75px;
		z-index: 999;
		width: 100%;
	}

	.product-box-shadow {
		box-shadow: -1rpx -1rpx 20rpx 0rpx rgba(6, 0, 1, 0.08);
	}

	.options-item {
		display: inline-block;
		margin: 20rpx;
		padding: .2rem .5rem;
		border-radius: .1rem;
		background-color: #eee;
		color: #565656 !important
	}

	.popup-button-box {
		position: fixed;
		right: 0;
		bottom: 0;
		width: 560rpx;
		background-color: #ffffff;
		border-top: 1px solid #eee;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	
	.class-item {
		font-size: 30rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #ddd;
	}
	.class-activi {
		color: #fff;
		background: linear-gradient(to right,#FF5257,#FC2D38);
	}
</style>
